<template>
    <div class="container">
        <div class="flex-box-align" style="padding-bottom: 20px;border-bottom: 1px solid #f4f4f4">
            <div class="flex">详情</div>
            <el-button @click="handleClickBack" type="primary" size="medium">返回</el-button>
        </div>
        <div class="main">
            <div class="table-wrap">
                <div class="header-wrap">基本信息</div>
                <div class="wrap-menu">
                    <div class="menu-list">
                        <div class="menu-name">头像</div>
                        <div class="menu-info">
                            <img class="avatar" :src="detail.images[0].fileUrl" alt="">
                        </div>
                    </div>
                    <div class="menu-list">
                        <div class="menu-name">姓名</div>
                        <div class="menu-info">{{detail.trueName}}</div>
                    </div>
                    <div class="menu-list">
                        <div class="menu-name">性别</div>
                        <div class="menu-info">
                            <span v-if="detail.sex == 1">男</span>
                            <span v-else>女</span>
                        </div>
                    </div>
                    <div class="menu-list">
                        <div class="menu-name">地区</div>
                        <div class="menu-info">{{detail.province}}{{detail.city}}{{detail.district}}</div>
                    </div>
                    <div class="menu-list">
                        <div class="menu-name">认证身份</div>
                        <div class="menu-info">{{dotsArr[detail.duty]}}</div>
                    </div>
                    <div v-if="detail.duty != 'hospital' && detail.duty != 'clinic' && detail.duty !='drugstore' && detail.duty !='medical_instrument_supplie' ">
                        <div class="menu-list">
                            <div class="menu-name">医疗机构</div>
                            <div class="menu-info">{{detail.company}}</div>
                        </div>
                        <div class="menu-list">
                            <div class="menu-name">科室</div>
                            <div class="menu-info">{{returnName(detail.department)}}</div>
                        </div>
                        <div class="menu-list">
                            <div class="menu-name">职称</div>
                            <div class="menu-info">{{positionList[detail.title]}}</div>
                        </div>
                    </div>
                    <div class="menu-list" v-if="detail.contactPerson">
                        <div class="menu-name">联系人</div>
                        <div class="menu-info">
                            {{detail.contactPerson}}
                        </div>
                    </div>
                    <div class="menu-list" v-if="detail.contactPhone">
                        <div class="menu-name">联系方式</div>
                        <div class="menu-info">
                            {{detail.contactPhone}}
                        </div>
                    </div>
                    <div class="menu-list">
                        <div class="menu-name">资格证书</div>
                        <div class="menu-info">
                            <img class="image-info" @click="imgClick(item.fileUrl)" :src="item ? item.fileUrl : ''" alt="" v-for="(item, index) in detail.certs" :key="index">
                            <!--<img   @click="imgClick(item.fileUrl)" v-if="item" v-for="(item,index) in info.certs" :key="index"   :src="item.fileUrl" alt="">-->
                        </div>
                    </div>
                    <div class="menu-list">
                        <div class="menu-name">简介</div>
                        <div class="menu-info">{{detail.introduction}}</div>
                    </div>
                    <div class="menu-list">
                        <div class="menu-name">擅长</div>
                        <div class="menu-info">{{detail.skill}}</div>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog
                :visible.sync="dialogVisible"
                size="tiny"
        >
            <img style="width: 100%" :src="imgUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    let CONSTANT = require('../../constant/constant.js');
    let common = require("../../common.js");
    import {parseUrlParams} from "../../util";
    export default {
        data() {
            return {
                detail: {},
                dialogVisible: false,
                dotsArr:{
                    'doctor':'医生',
                    'nurse':'护士',
                    'recover_physical_therapist':'康复理疗师',
                    'health_manager':'健康管理师',
                    'apothecary':'药师',
                    'hospital':'医院',
                    'clinic':'诊所',
                    'drugstore':'药店',
                    'medical_instrument_supplie':'医疗器械供应商'
                },
                positionList: {
                    "doctor_one": "主任医师",
                    "doctor_two":  "副主任医师",
                    "doctor_three":"主治医师",
                    "doctor_four": "医师",
                    "doctor_five":  "执业药师",
                    "doctor_six": "药士",
                    "doctor_seven":"药师",
                    "doctor_eight":"主管药师",
                    "doctor_nine":"助理医师",
                    "doctor_eleven":"中医师",
                    "doctor_tweleve": "康复理疗师",
                    "doctor_thirteen":"健康管理师",
                    "doctor_fourteen": "执业护士"
                },
                sectionList: [
                    {key: "fu", value: "妇科"},
                    {key: "er", value: "儿科"},
                    {key: "nei", value: "内科"},
                    {key: "quan", value: "全科"},
                    {key: "hu_xi", value: "呼吸科"},
                    {key: "xin_nei", value: "心内科"},
                    {key: "xiao_hua", value: "消化科"},
                    {key: "gan_bing", value: "肝病科"},
                    {key: "shen_zang", value: "肾脏科"},
                    {key: "nei_fen_mi", value: "内分泌科"},
                    {key: "shen_jing_nei", value: "神经内科"},
                    {key: "feng_shi_mian_yi", value: "风湿免疫科"},
                    {key: "zhong_liu", value: "肿瘤科"},
                    {key: "xue_ye", value: "血液科"},
                    {key: "pi_fu", value: "皮肤科"},
                    {key: "ru_xian", value: "乳腺科"},
                    {key: "nan", value: "男科"},
                    {key: "teng_tong", value: "疼痛科"},
                    {key: "lao_nian_bing", value: "老年病科"},
                    {key: "zhou_wei_xue_guan", value: "周围血管科"},
                    {key: "gu_shang", value: "骨伤科"},
                    {key: "zhong_yi_yi_nan_bing", value: "中医疑难病科"},
                    {key: "zhen_jiu", value: "针灸科"},
                    {key: "zhi_wei_bing", value: "治未病科"},
                    {key: "tui_na", value: "推拿科"},
                    {key: "wu_guan", value: "五官科"},
                    {key: "yan", value: "眼科"},
                    {key: "er_bi_hou", value: "耳鼻喉科"},
                    {key: "gang_chang", value: "肛肠科"},
                    {key: "kou_qiang", value: "外科"},
                    {key: "wai_shen_jing", value: "外神经科"},
                    {key: "mi_niao_wai", value: "泌尿外科"},
                    {key: "ji_zhen", value: "急诊科"},
                    {key: "sheng_zhi", value: "生殖科"},
                    {key: "kang_fu", value: "康复科"},
                    {key: "mei_rong", value: "美容科"},
                    {key: "xin_li", value: "心理科"},
                    {key: "xin_shen_yi_xue", value: "心身医学科"},
                    {key: "ti_jian_zhong_xin", value: "体检中心科"},
                    {key: "yao_ji", value: "药剂科"},
                    {key: "yi_wu", value: "医务科"},
                    {key: "ying_yang", value: "营养科"},
                ],
            }
        },
        components: {

        },
        mounted() {
            common.requestAjax(CONSTANT.URL.DOCTOR.DOCTORINFO, {}, {id: parseUrlParams("id")}, (res) => {
                if (res.status == 200) {
                    this.detail = res.data.bussData
                }
            }, null)
        },
        methods: {
            handleClickBack() {
                this.$router.back(-1)
            },
            returnName(val){
                let str;
                this.sectionList.map((item)=>{
                    if(item.key == val){
                        str = item.value;
                    }
                })
                return str;
            },
            imgClick(url){
                this.imgUrl = url;
                this.dialogVisible = true;
            },
        }
    }
</script>

<style lang="scss">
    .container {
        .main{
            margin-left: 5%;
            .table-wrap{
                width: 80%;
                margin-top: 30px;
                .header-wrap{
                    height: 50px;
                    line-height: 50px;
                    font-size: 14px;
                    border: 1px solid #dedede;
                    padding-left: 50px;
                    background-color: #f5f5f5;
                    color: #000;
                    font-weight: bold;
                }
                .wrap-menu{
                    border-right: 1px solid #dedede;
                    border-left: 1px solid #dedede;
                    .menu-list{
                        border-bottom: 1px solid #dedede;
                        display: -webkit-box;
                        display: box;
                        display: -moz-box;
                        /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
                        display: -webkit-flex;
                        /* 新版本 - 适配Chrome */
                        display: flex;
                        -webkit-box-align: center;
                        -moz-align-items: center;
                        -webkit-align-items: center;
                        align-items: center;
                        min-height: 80px;
                        font-size: 14px;
                        cursor: pointer;
                        &:hover{
                            background-color: #f5f7fa;
                        }
                        .menu-name{
                            display: -webkit-box;
                            display: box;
                            display: -moz-box;
                            /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
                            display: -webkit-flex;
                            /* 新版本 - 适配Chrome */
                            display: flex;
                            -webkit-box-align: center;
                            -moz-align-items: center;
                            -webkit-align-items: center;
                            align-items: center;
                            -webkit-box-justify-content:  flex-end;
                            -moz-align-justify-content:  flex-end;
                            -webkit-align-justify-content:  flex-end;
                            justify-content:  flex-end;
                            flex: 1;
                            -webkit-flex: 1;
                            text-align: right;
                            min-height: 80px;
                            border-right: 1px solid #dedede;
                            color: #909399;
                            padding: 10px  30px 10px 0;
                        }
                        .menu-info{
                            display: -webkit-box;
                            display: box;
                            display: -moz-box;
                            /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
                            display: -webkit-flex;
                            /* 新版本 - 适配Chrome */
                            display: flex;
                            -webkit-box-align: center;
                            -moz-align-items: center;
                            -webkit-align-items: center;
                            align-items: center;
                            -webkit-box-justify-content:  flex-start;
                            -moz-align-justify-content:  flex-start;
                            -webkit-align-justify-content:  flex-start;
                            justify-content:  flex-start;
                            min-height: 80px;
                            flex: 3;
                            -webkit-flex: 3;
                            padding: 10px  0px 10px 30px;;
                            .image-info{
                                width: 80px;
                                height: 80px;
                                cursor: pointer;
                                margin-right: 10px;
                            }
                            .avatar{
                                width: 80px;
                                height: 80px;
                                border-radius: 50%;
                                -webkit-border-radius: 50%;
                            }
                        }
                    }
                }
            }
        }
        .doctor-detail {
            margin-top: 20px;
            .doctor-wrapper {
                border: 1px solid #ccc;
                ul {
                    li {
                        border-bottom: 1px solid #ccc;
                        padding: 15px 0;
                        &:last-child {
                            border-bottom: 0;
                        }
                        span{
                            display: inline-block;
                            &:first-child {
                                width: 15%;
                                text-align: center;
                            }
                        }
                        .avatar {
                            img {
                                width: 50px;
                                height: 50px;
                                border-radius: 50%;
                                vertical-align: middle;
                            }
                        }
                        .certificate-imgs {
                            img {
                                width: 70px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
